<!DOCTYPE html>
<html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<ui:insert name="title">
		<title>Seven2</title>
	</ui:insert>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="Alex, Danrley, Anderson and Guilherme" />

	<h:outputStylesheet library="css" name="bootstrap.min.css" />
	<h:outputStylesheet library="css" name="estilo.css" />

	<h:outputScript library="js" name="jquery.js" />
	<h:outputScript library="js" name="jquery.scrollTo-1.4.2-min.js" />
	<h:outputScript library="js" name="jquery.localscroll-1.2.7-min.js" />

	<script type="text/javascript">
		function changeClass() {
			var nome = document.getElementsById('nome');
			var email = document.getElementsById('email');
			var senha = document.getElementsById('senha');
			var confirmar = document.getElementsById('confirmar');

			if (nome.value == '' || email.value == '' || senha.value == ''
					|| confirmar.value == '') {
				alert('Por favor, preencha todos os campos');
				return false;
			} else if (senha.value != confirmar.value) {
				alert('Ops! A senha não confere');
				confirmar.focus();
				return false;
			}

			return true;

		}
	</script>

</h:head>

<h:body>

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">

			<a href="#" class="navbar-brand">Seven2</a>

			<button class="navbar-toggle" data-toggle="collapse"
				data-target=".navHeaderCollapse">
				<span class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>

			<div class="collapse navbar-collapse navHeaderCollapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="login.xhtml">Home</a></li>
					<li><a href="#">Contato</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="jumbotron"
		style="width: 94%; margin-left: 3%; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; margin-bottom: 1%;">
		<div class="container">
			<div class="span12">
				<h1>Bem vindo ao Seven!</h1>
			</div>
			<div class="span6" style="float: left;">
				<div class="page-header">
					<h2>Cadastre-se</h2>
				</div>
				<h:form class="form-horizontal" role="form" method="post">
					<h:messages />
					<div class="form-group">
						<label for="nome" class="col-sm-4 control-label"
							style="text-align: left;">Nome</label>
						<div class="col-sm-8">
							<h:inputText class="form-control" id="nome" required="true"
								requiredMessage="O campo nome deve ser preenchido"
								value="#{usuarioBean.usuario.nome}" />
						</div>
					</div>
					<div class="form-group">
						<label for="email" class="col-sm-4 control-label"
							style="text-align: left;">Email</label>
						<div class="col-sm-8">
							<h:inputText class="form-control" id="email" required="true"
								requiredMessage="O campo email deve ser preenchido"
								value="#{usuarioBean.usuario.email}" />
						</div>
					</div>
					<div class="form-group">
						<label for="senha" class="col-sm-4 control-label"
							style="text-align: left;">Senha</label>
						<div class="col-sm-8">
							<h:inputSecret class="form-control" id="senha" required="true"
								requiredMessage="O campo senha deve ser preenchido"
								value="#{usuarioBean.usuario.senha}" />
						</div>
					</div>
					<div class="form-group">
						<label for="confirmaSenha" class="col-sm-4 control-label"
							style="text-align: left;">Confirmar Senha</label>
						<div class="col-sm-8">
							<h:inputSecret class="form-control" id="confirmaSenha"
								required="true"
								requiredMessage="O campo confirmar senha deve ser preenchido" />
						</div>
					</div>
					<h:commandButton class="btn btn-primary" value="Cadastrar"
						action="#{usuarioBean.cadastrarUsuario}" onclick="changeClass()" />
				</h:form>
			</div>
			<div class="span4" style="float: right;">
				<div class="page-header">
					<h2>Login</h2>
				</div>
				<h:form class="form-horizontal" role="form">
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
						<div class="col-sm-10">
							<h:inputText class="form-control" value="#{loginBean.usuario.email}"
								id="email" required="true"
								requiredMessage="O campo email deve ser preenchido" />
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">Senha</label>
						<div class="col-sm-10">
							<h:inputSecret class="form-control"
								value="#{loginBean.usuario.senha}" id="senha" required="true"
								requiredMessage="O campo senha deve ser preenchido" />
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-1">
							<div class="checkbox">
								<label> <input type="checkbox"> Remember me</input>
								</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-1">
							<h:commandButton class="btn btn-primary" value="Entrar"
								action="#{loginBean.fazerLogin}" />
						</div>
					</div>
				</h:form>
			</div>
		</div>
	</div>

	<div class="navbar navbar-default navbar-fixed-bottom">
		<div class="container">
			<p class="navbar-text pull-left">
				Desenvolvido por <a href="https://www.facebook.com/petsiufc">PET-Sistemas
					de Informação (Universidade Federal do Ceará - Quixadá)</a>
			</p>
		</div>
	</div>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<h:outputScript library="js" name="bootstrap.min.js" />

</h:body>

</html>